<!DOCTYPE html>  
<html>  
<head>  
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
	<title>Track Presentation</title>
	<style type="text/css">  
		html{height:100%}  
		body{height:100%;margin:0px;padding:0px}  
		#container{height:100%;margin: 20px;}  
	</style>  
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=YWdGplhYjUGQ3GtpKNeuTM2S"></script>
    <a href="index1.html" class="button">返回</a>
</head>  

<body>  
	<div id="container"></div>

	<script type="text/javascript"> 
		// 实时轨迹demo。
		// 实际运用的话可能ajax实时读取后台数据，加载到地图上。


		// 获取随机数
		function getRandom(n){
			return Math.floor(Math.random()*n+1)
		}

		//在轨迹点上创建图标，并添加点击事件，显示轨迹点信息。points,数组。
		function addMarker(points){
			var pointsLen = points.length;
			if(pointsLen == 0){
				return;
			}
			var myIcon = new BMap.Icon("track.ico", new BMap.Size(5, 5), {
				offset: new BMap.Size(5, 5) 
			});

			// 创建标注对象并添加到地图   
			for(var i = 0;i <pointsLen;i++){
				var point = new BMap.Point(points[i].lng,points[i].lat);
				var marker = new BMap.Marker(point, {icon: myIcon});
				map.addOverlay(marker); 
			}
		}    

		//添加线
		function addLine(points){

			var linePoints = [],pointsLen = points.length,i,polyline;
			if(pointsLen == 0){
				return;
			}
			// 创建标注对象并添加到地图   
			for(i = 0;i <pointsLen;i++){
				linePoints.push(new BMap.Point(points[i].lng,points[i].lat));
			}

			polyline = new BMap.Polyline(linePoints, {strokeColor:"red", strokeWeight:2, strokeOpacity:0.5});   //创建折线
			map.addOverlay(polyline);   //增加折线
		}

		//随机生成新的点，加入到轨迹中。
		function dynamicLine(position, id){
			var lng = position[0];
			var lat = position[1];
			var point = {"lng":lng,"lat":lat,"status":1,"id":id}
			var makerPoints = [];
			var newLinePoints = [];
			var len;

			makerPoints.push(point);			
			addMarker(makerPoints);//增加对应该的轨迹点
			points.push(point);
			bPoints.push(new BMap.Point(lng,lat));
			len = points.length;
			newLinePoints = points.slice(len-2, len);//最后两个点用来画线。

			addLine(newLinePoints);//增加轨迹线
			setZoom(bPoints);
			setTimeout(dynamicLine, 1000);
		}
                
                // 根据传入的点添加线路，功能和dynamicLine类似，不过前者是添加随机产生的点
                function addRoute(id){
                    console.log('debug addRoute id: '+id)
                    var lng = positions[id][0];
                    var lat = positions[id][1];
                    var point = {"lng":lng,"lat":lat,"status":1,"id":id}
                    var makerPoints = [];
                    var newLinePoints = [];
                    var len;

                    makerPoints.push(point);			
                    addMarker(makerPoints);//增加对应该的轨迹点
                    points.push(point);
                    bPoints.push(new BMap.Point(lng,lat));
                    len = points.length;
                    newLinePoints = points.slice(len-2, len);//最后两个点用来画线。

                    addLine(newLinePoints);//增加轨迹线
                    setZoom(bPoints);
                    if (id+1 < positions.length){
                        setTimeout(function(){addRoute(id+1)}, 1000);
                    }
                }

		//根据点信息实时更新地图显示范围，让轨迹完整显示。设置新的中心点和显示级别. 
		//更新。设置不是每次增加点都重新设置显示范围。因为有可能会想放大了看。
		function setZoom(bPoints){
			var view = map.getViewport(eval(bPoints));
			if(map.oldView != JSON.stringify(view)){
				var mapZoom = view.zoom; 
				var centerPoint = view.center; 
				map.centerAndZoom(centerPoint,mapZoom);
				map.oldView = JSON.stringify(view);
			}

		}
                // 解析网址，获取到？号后面带着的经纬度信息
                // format: lng1,lat1&lng2,lat2&lng3,lat3...
                function parseUrl(urlinfo){
                    len=urlinfo.length;//获取url的长度
                    offset=urlinfo.indexOf("?");//设置参数字符串开始的位置
                    newsidinfo=urlinfo.substr(offset+1,len)//取出参数字符串 这里会获得类似“id=1”这样的字符串
                    newsids=newsidinfo.split("=");//对获得的参数字符串按照“=”进行分割
                    newsid=newsids[1];//得到参数值
                    newsname=newsids[0];//得到参数名字
                    locations = newsidinfo.split("&");
                    positions = [];
                    locations.forEach(location=>{
                        loc = location.split(",");
                        console.log(loc);
                        positions.push( [parseFloat(loc[0]), parseFloat(loc[1])] ) 
                    })
                    return positions;
                }
                /* 用途: 接收地直栏参数 取id=1 根据ID的值 */
                urlinfo=window.location.href; //获取当前页面的url
                
                
                //alert (urlinfo)
		//数据准备,
                var positions = parseUrl(urlinfo);//从html参数得到的解析值
                console.log("debug positions: ", positions)
		var points = [];//原始点信息数组
		var bPoints = [];//百度化坐标数组。用于更新显示范围。

		//地图操作开始
		var map = new BMap.Map("container");  

		map.centerAndZoom(new BMap.Point(103.388611,35.563611), 5); //初始显示中国。

		map.enableScrollWheelZoom();//滚轮放大缩小
		setTimeout(function(){addRoute(0)}, 1000);//动态生成新的点。
                   
	</script> 
        
        
</body>  
</html>